<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-02-29 10:33:07"
-->
<template>
  <v-container>
    <v-tabs v-model="typeIndex">
      <v-tab>文章</v-tab>
      <v-tab>图片</v-tab>
      <v-tab>视频</v-tab>
      <v-tab>音频</v-tab>
      <v-tab>缩略图</v-tab>
      <v-tab>素材计数</v-tab>
    </v-tabs>
    <v-tabs-items v-model="typeIndex">
      <v-tab-item>
        <MaterialArtical/>
      </v-tab-item>
      <v-tab-item>
        <v-lazy>
          <MaterialList type="image"/>
        </v-lazy>
      </v-tab-item>
      <v-tab-item>
        <v-lazy>
          <MaterialList type="video"/>
        </v-lazy>
      </v-tab-item>
      <v-tab-item>
        <v-lazy>
          <MaterialList type="audio"/>
        </v-lazy>
      </v-tab-item>
      <v-tab-item>
        <v-lazy>
          <MaterialList type="thumb"/>
        </v-lazy>
      </v-tab-item>
      <v-tab-item>
        <v-card flat :loading="loading" v-intersect.once="onIntersect">
          <code>{{stats}}</code>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
  </v-container>
</template>
<script>
import MaterialList from './components/MaterialList.vue'
import MaterialArtical from './components/MaterialArtical.vue'
import { stats } from '@/api/admin/wx-material.js'
export default {
  name: 'WxMaterial',
  components: { MaterialList, MaterialArtical },
  data: function () {
    return {
      typeIndex: 0,
      stats: null,
      loading: true
    }
  },
  created: function () {
  },
  computed: {},
  methods: {
    onIntersect(entries, observer, isIntersecting) {
      if (this.stats === null) {
        stats().then(res => {
          this.stats = res.data
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>
<style scoped>
</style>
